<template>
    <div class="box">
        <header>
            <div class="left">
                <router-link to="/shouye"><span>首页</span></router-link>
                <router-link to="/shequ"><span>社区</span></router-link>  
            </div>
            <div class="right">
                <i class="iconfont icon-zhanghu"></i>
                <i class="iconfont icon-27"></i>
            </div>             
        </header>
        <ul class="list">
            <div v-for="(item) in list" :key="item.id">
                <img :src="item.img" alt="">
                <router-link :to="{ name:'shangping'}"><span :text="item.text">{{item.text}}</span></router-link>
                <p :price="item.price">{{item.price}}</p>
            </div>
        </ul>  
    </div>
  </template>
  <script>
  export default {
    data () {  
        return {
            list:[
                {id:"1",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/77647/3/21872/145313/6370f54aE2f0f455d/3876e644b428d33c.png.webp", text:"华硕a豆14 14英寸高颜值学生办公轻薄本笔记本电脑 幻金粉 i3-1115G4 8G 512G",price:"￥2899.00"},
                {id:"2",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/85580/9/18081/111934/61387cbaE1a01b3b2/5124ced8e1468466.jpg!q70.dpg.webp", text:"乐事 “无限” 薯片 原味", price:"￥17.40"},
                {id:"3",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/156837/25/5911/101042/5fffb7d8E66479a3a/1442bc90153a8399.jpg!q70.dpg.webp", text:"休闲迷你金钱烧烤猪肉 100g", price:"￥49.00"},
                {id:"4",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/149047/6/27581/145765/634f5d4aE5c27d43b/75875707b8bf7dbe.jpg!q70.dpg.webp", text:"小胡鸭 酸辣无骨鸡爪脱骨去骨鸭掌泡椒", price:"￥45.00"},
                {id:"5",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/162425/6/22926/112832/61837274E3e5798c2/bcf27be9f836930b.jpg!q70.dpg.webp", text:"嘉顿 夹心饼干芝士味 早餐休闲零食糕点", price:"￥16.50"},
                {id:"6",img:"https://img10.360buyimg.com/mobilecms/s360x360_jfs/t1/114932/4/28729/135524/6309bb84Ec1a570df/595f8dcd5222a7e4.jpg!q70.dpg.webp", text:"味滋源乳酸菌小口袋面包300g 网红办公室休闲零食", price:"￥13.90"},
            ],
        }
    },
    components:{
    
    }
    
  }
  </script>
  <style lang="less" scoped>
    *{
        margin: 0;
        padding: 0 auto;
    }
    .box{
        background-color: #F6F6F6;
    }
    header {
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        justify-content: space-between;
        a{text-decoration:none;color:#000;}
        i{
            margin-left: 20px;
            margin-right: 20px;
            font-size: 0.5rem;
            color: #5F6368;
            float:right;
            // .icon-zhanghu{
            //     margin-left: 20px;
            //     margin-right: 20px;
            //     font-size: 0.4rem;
            //     color: #5F6368;
            //     margin: right;
            // }
        }    
        span {
            font-size: 0.34667rem;
            padding: 0px 10px;
            color: #5F6368;
        }
    }
    .list{
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        padding-top:20px ;
        justify-content: space-around;
        a{text-decoration:none;color:#000;}
        
        div{
            margin-top: 10px;
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: #FFFFFF;

            img {
                width: 173px;
                height: 173px;
            }
            span {
                
                width: 170px;
                text-align: center;
                height: 100%;
                font-size: 17px;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                
            }
            p{
                color: red;
                font-size: 20px;
                margin-bottom: 15px;
            }
        }
    }



</style>